<template>
  <div class="app-container">
    <div class="warp_padding">   
      <div >
        <el-form :inline="true" :model="formDate" class="demo-form-inline" >    
          <el-form-item label="设备ID">
            <el-input v-model="formDate.deviceId" placeholder="设备ID" size="mini"  style="width:180px" clearable></el-input>
          </el-form-item>         

         <!--  <el-form-item label="学校">
            <el-input v-model="formDate.schId" placeholder="学校" size="mini" style="width:180px"></el-input>
          </el-form-item> 
          <el-form-item label="开始时间">
              <el-date-picker v-model="formDate.createtime" type="date" size="mini"  style="width:180px" :picker-options="pickerCreatetime" placeholder="选择开始时间">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
              <el-date-picker v-model="formDate.endtime" type="date" size="mini"  style="width:180px" :picker-options="pickerEndtime" placeholder="选择结束时间">
              </el-date-picker>
          </el-form-item>   -->           
          <el-form-item>
            <el-button type="primary" @click="getQuery" size="mini" >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="lists" style="width: 100%;margin:10px 0;" >
          <el-table-column prop="number" label="序号" min-width="5%">          
          </el-table-column>
          <el-table-column prop="deviceId"  label="设备ID" min-width="8%">
          </el-table-column>
          <el-table-column prop="schName"  label="学校" min-width="8%">
          </el-table-column>
          <el-table-column prop="interactTeaType"  label="互动老师类型" min-width="8%">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.interactTeaType =='0'">主讲</el-tag>
              <el-tag type="warning" v-if="scope.row.interactTeaType =='1'">听讲</el-tag>
            </template>
          </el-table-column>       
          <el-table-column prop="startTime"  label="登录时间" min-width="8%">
          </el-table-column>
          <el-table-column prop="endTime"  label="登出时间" min-width="8%">
          </el-table-column>          
        </el-table>      
      </div>

      <el-col :span="24" class="toolbar">
            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>
    </div>
  </div>
</template>

<script>
  import { journal } from '@/api/request'
    export default {
      data() {
        return {
          formDate:{
            pageNo: 1,  
            pageSize:10, 
            deviceId:'',      
            schId:'',
            startTime:'',
            endTime:'',
            interactTeaType:'',
          },
          total:0,  //总数
          pageCount: 0,
          pagerCount:11,
          lists: [],
          pickerCreatetime: {
            disabledDate: time => {
              if (this.formDate.endtime) {
                return (
                  time.getTime() > new Date ( this.formDate.endtime ).getTime()
                )
              } else {
                // 不能大于当前日期
                  return time.getTime() > Date.now()
              }
            }
          },
          pickerEndtime: {
            disabledDate: time => {
              if(this.formDate.createtime) {
                return (
                  time.getTime() > Date.now() ||
                  time.getTime() < new Date(this.formDate.createtime).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
                )
              } else {
                return time.getTime() < Date.now()
              }
            }
          }
        }
      },
      mounted() {
        // this.init();
      }, 
      methods: { 
        getQuery() {
           this.init();
        },  
        handleCurrentChange(val) {
          this.formDate.pageNo = val;
          this.init()
        },
        handleSizeChange(val) {
          this.formDate.pageSize = val
          this.init()
        },     
        init(){
            this.formDate.deviceId = this.formDate.deviceId.trim()
            journal(  this.formDate ).then(res => {
              // console.log(res)
              let { list, total } = res
              this.lists = list
              this.total = total
            })
        }
      }
    }
  </script>

  <style scoped lang="scss">

  </style>
